<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no"/>
		<title>变色龙科技模板</title>
		<link rel="stylesheet" href="css/index2.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index-min.css" media = "all and (max-width:650px)">
	</head>
	<body>
		<div class="box">
			<header>
				<div class="top">
					<h1>变色龙科技</h1>
					<p>无生活，不涉及</p>
				</div>
				<nav>
					<ul>
						<li>首页</li>
						<li>理念</li>
						<li>作品</li>
						<li>团队</li>
					</ul>
					<input type="text" placeholder="Search" />
				</nav>
				</header>
				<main>
					<div class="main-left">
						<h2>圆形风格的移动应用实例</h2>
						<span>Oct 27,2017</span>
						<img src="./img/sample-image.jpg">
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;圆形被认为是能够被人眼最快识别出的对象之一。这就意味着我们的大脑有能力处理在圆形中的信息比处理在常规的三角或矩形中的数据略快一些。对于小型的以手势为基础的交互界面中，这种能力真的非常关键。这一点对移动设备来说尤为典型，在大多数的情况下，这成为了选择基本UI元素形状的决定性因素。赏心悦目的曲线取代了尖锐边缘，有助于营造一种温暖舒适的气氛，让感观愉悦。它有效地增强了用户体验，让交互界面简单而明了。
选择圆形一个最普通的原因就是它模仿指尖的形状的能力下意识也将圆形元素与按钮联系在一起。因此，作为一条规律，你很容易发现行为召唤的按钮（call-to-action buttons）应用在环形结构后，有相当一部分应用程序大肆地在设计中使用这一形状。例如，音乐导向的应用，或者是可视化的闹钟以及时钟都离不开环形结构。

本文的选例都是带有明确的圆形风格的移动交互界面，这些界面自然地融入了UI流畅性，更多的可用性和吸引力。

Eli Williamson设计的Lock Screen Concept使用绚丽的相片背景来吸引用户的注意力。紧凑的排版，醒目的圆形图案以及主体的白色给应用增加了雅致与空间感。</p>
					<img src="./img/2300334P9-4.jpg">
					</div>
					<div class="main-right">
						<div class="update">
							<h3>最近更新</h3>
							<ul>
								<li>
									<a href="#">快讯</a>
									<span>(10)</span>
								</li>
								<li>
									<a href="#">设计</a>
									<span>(8)</span>
								</li>
								<li>
									<a href="#">建议</a>
									<span>(5)</span>
								</li>
							</ul>
						</div>
						<div class="show">
							<h3>作品展示</h3>
							<ul>
								<li><img src="img/ps.jpg" alt=""></li>
								<li><img src="img/ae.jpg" alt=""></li>
								<li><img src="img/dw.jpg" alt=""></li>
								<li><img src="img/fl.jpg" alt=""></li>
								<li><img src="img/ai.jpg" alt=""></li>
								<li><img src="img/fw.jpg" alt=""></li>
								<li><img src="img/id.jpg" alt=""></li>
								<li><img src="img/au.jpg" alt=""></li>
							</ul>
						</div>
					</div>
				</main>
				<footer class="footer">
					<p>web Design by sharwoo</p>
				</footer>
		</div>
	</body>
</html>
